<template>
   <div class="center">
        <div class="center-form">
          <el-form inline label-width="120px" @submit.native.prevent>
            <el-form-item label="审核状态">
              <el-select
                clearable
                v-model="listParsem.reviewedStatus"
                placeholder="请选择审核状态"
              >
                <el-option  label="审核中" value="0"></el-option>
                <el-option  label="审核驳回" value="2"></el-option>
                <el-option  label="预审核通过" value="3"></el-option>
              </el-select>
              <!-- <el-input v-model="listParsem.reviewedStatus" placeholder="请输入商户小程序名称" clearable class="selWidth" size="small" /> -->
            </el-form-item>
            <el-form-item label="商户号/商户名称">
              <el-input v-model="listParsem.merchantWords" placeholder="请输入商户号/商户名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label=" ">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="initList"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" type="primary" @click="resetList"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="center-construct">
              <el-button type="primary" style="margin-right: 20px;" @click="channelTypeClick">
                商户进件
              </el-button>
              <el-button type="primary" style="margin-right: 20px;" @click="bindChannelTypeClick">
                绑定进件
              </el-button>
              <!-- <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="entryClcik">汇付进件</el-dropdown-item>
                <el-dropdown-item @click.native="entryClcik">汇聚进件</el-dropdown-item>
              </el-dropdown-menu> -->
            <!-- <el-button type="primary" style="margin-right: 30px;" @click="constructClick">商户进件</el-button> -->
        </div>
        <div class="center-table">
          <el-table
          ref="multipleTable"
          :data="tableList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column
            label="商户号"
            align="center"
            prop="merchantNo"
          >
          </el-table-column>
          <el-table-column
            label="商户名称"
            align="center"
            prop="merchantName"
          />
          <el-table-column
            prop="channelName"
            label="使用通道"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          ></el-table-column>
          <el-table-column label="商户状态" width="120" align="center">
            <template slot-scope="scope">
              <div class="hui" v-if="scope.row.status == 0">审核中</div>
              <div class="red" v-if="scope.row.status == 2" style="display: flex;align-items: center;justify-content: center;">审核驳回
                <el-popover
              v-if="scope.row.status == 2"
                placement="top-start"
                title="拒绝原因"
                width="200"
                trigger="hover"
                :content="scope.row.reason">
                <i slot="reference" style="margin:-5px 0 0 5px ;" class="el-icon-question" ></i>
              </el-popover>
              </div>
              <div class="red" v-if="scope.row.status == 3">预审核通过</div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="140"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="joinmerchantsinfo(scope.row)"
                >详情</el-button>
                <el-button
                type="text"
                size="small"
                v-if="scope.row.status == 2"
                @click="upDataInlet(scope.row)"
                >编辑</el-button>
                <!--    -->
            </template>
          </el-table-column>
        </el-table>
       <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-size="listParsem.size"
          :current-page.sync="listParsem.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
    </div>
        </div>
        <el-dialog
           title="选择通道"
           :visible.sync="channelVisible"
           width="500px"
           >
           <el-form label-position="top" :model="channelForm" :rules="channelFormRules">
            <el-form-item label="选择通道" prop="channelId"  style="width: 100%;">
              <el-select
                style="width:100%"
                clearable
                v-model="channelForm.channelId"
                @change="channelChange"
                placeholder="请选择通道"
              >
                <el-option v-for=" item in channelList" :label="item.channelname" :value="item.id" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
           </el-form>
           <span slot="footer" class="dialog-footer">
             <el-button @click="channelVisible = false">取 消</el-button>
             <el-button type="primary" @click="channelTypeRotuer">确 定</el-button>
           </span>
       </el-dialog>
       <el-dialog
           title="绑定进件"
           :visible.sync="bindChannelVisible"
           width="500px"
           >
           <el-form label-position="top" :model="channelForm" ref="channelForm" :rules="channelFormRules">
            <el-form-item label="选择通道" prop="channelId"  style="width: 100%;">
              <el-select
                style="width:100%"
                clearable
                @change="channelChange"
                v-model="channelForm.channelId"
                placeholder="请选择通道"
              >
                <el-option v-for=" item in channelList" :label="item.channelname" :value="item.id" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="渠道商户号" prop="mchId"  style="width: 100%;">
               <el-input  v-model.trim="channelForm.mchId" style="width: 100%;" placeholder="请输入渠道商户号" clearable  />
            </el-form-item>
            <el-form-item label="负责人手机号" prop="contactPhone" v-if="channelForm.channelType == '45'"  style="width: 100%;">
               <el-input  v-model.trim="channelForm.contactPhone" style="width: 100%;" placeholder="请输入负责人手机号" clearable  />
            </el-form-item>
           </el-form>
           <span slot="footer" class="dialog-footer">
             <el-button @click="bindChannelVisible = false">取 消</el-button>
             <el-button type="primary" @click="bindChannelTypeRotuer">确 定</el-button>
           </span>
       </el-dialog>
    </div>
</template>
<script>
import {  reviewedQuery , reportQuery , divideChannelList , queryStatusMerchant , getConfigureChannels , querySaveMerchant} from '@/api/api'
export default{
    data(){
        return{
            tableList:[],
            listParsem:{page:1,size:10},
            total:0,
            channelFormRules:{
              channelId:[{ required: true, message: '请选择通道', trigger: 'change' }],
              mchId:[{ required: true, message: '请输入渠道商户号', trigger: 'change' }],
              contactPhone:[{ required: true, message: '请输入负责人手机号', trigger: 'change' }]
            },
            channelForm:{},
            channelList:[],
            instNo:'',
            channelVisible:false,
            bindChannelVisible:false
        }
      },
      mounted(){
        this.initList()
        this.initChannelList()
      },
      methods:{
        async initList(){
          const res = await queryStatusMerchant(this.listParsem)
          this.tableList = res.data
          this.total = res.pageInfo.recordCount
        },
        async initChannelList(){
          this.channelList = []
          const res = await divideChannelList({page:1,size:999})
          res.data.rows.forEach(item => {
               if(item.paytype == '16' || item.id == '71'){
                this.channelList.push(item)
               }
          });
        },
        upDataInlet(v){
            if(v.channelType == '90'){ //汇聚
              this.$router.push('convergeEntry?channelId='+v.channelId + '&channelType='+ v.channelType + '&mid='+ v.id)
            }else if(v.channelType == '45'){ // 星驿付(乐收赢)
              this.$router.push('xingyiPay?channelId='+v.channelId + '&channelType='+ v.channelType + '&mid='+ v.id)
            }else if(v.channelType == '16'){ //汇付
              this.$router.push('remittanceEntry?channelId='+v.channelId +  '&channelType='+ v.channelType+ '&mid='+ v.id)
            }
        },
        channelTypeRotuer(){
          console.log(this.channelForm.channelId)
          if(this.channelForm.channelId){
            if(this.channelForm.channelId == '90'){ //汇聚
              this.$router.push('convergeEntry?channelId='+this.channelForm.channelId + '&channelType='+ this.channelForm.channelType)
            }else if(this.channelForm.channelId == '71'){ // 星驿付(乐收赢)
              this.$router.push('xingyiPay?channelId='+this.channelForm.channelId + '&channelType='+ this.channelForm.channelType)
            }else{ //汇付
              this.$router.push('remittanceEntry?channelId='+this.channelForm.channelId +  '&channelType='+ this.channelForm.channelType)
            }
          }else{
            this.$message.error('请选择通道！')
          }
        },
        async bindChannelTypeRotuer(){
             const valid = await this.$refs.channelForm.validate()
             if(valid){
              if(this.channelForm.id == '90'){ //汇聚
                this.$router.push('convergeEntry?channelId='+this.channelForm.channelId)
              }else{ //汇付
                this.$router.push('remittanceEntry?channelId='+this.channelForm.channelId + '&mchId='+this.channelForm.mchId+'&instNo=' + this.instNo)
              }
             }
        },
        channelChange(v){
          const data = this.channelList.find(item=>item.id == v)
          if(data){
            console.log(data)
            this.channelForm.channelType = data.paytype
          }
        },
         joinmerchantsinfo(val){
           if(val.status === 0){
             reviewedQuery({merchantId:val.id,channelType:val.channelType})
           }else if(val.status === 3){
             reportQuery({merchantId:val.id,channelType:val.channelType})
           }
          this.$router.push({
            path: "/merchantsinfo?status="+val.status,
          });
          sessionStorage.setItem("merchants_id", JSON.stringify(val.id));
          sessionStorage.setItem(
          "merchants_merchantName",
          JSON.stringify(val.merchantName)
      )
        },
        channelTypeClick(){
          this.channelVisible = true
        },
        bindChannelTypeClick(){
          this.bindChannelVisible = true
        },
        resetList(){
            this.listParsem = {page:1,size:10}
            this.initList()
        },
        handleCurrentChange(val) {
          this.listParsem.page = val;
          this.initList()
        },
        renderheader(h, { column, $index }) {
           return h("span", {}, [
             h("span", {}, column.label.split("?")[0]),
             h("br"),
             h("span", {}, column.label.split("?")[1]),
           ]);
        },
        sizechange(val) {
          this.listParsem.size = val;
          this.initList()
        },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
          }
       }
      }
    }
</script>
<style scoped>
.center{
    width: 100%;
    height: calc(100% - 30px);
    background-color: #fff;
    padding-top: 30px;
}
.center-form{
  padding: 0 22px;
}
.center-construct{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}
.center-table{
    margin-top: 30px;
    padding: 0 20px;
}
.construct-dialog{
    height: 60vh;
    overflow-y: auto;
}
::v-deep .el-upload--text{
    width: 160px;
    height: 160px;
    line-height: 160px;
}
.video{
  width: 160px;
    height: 160px;
}
/* 针对 Firefox */
.construct-dialog {
  scrollbar-width: none; /* Firefox */
}
 
/* 针对 Chrome, Edge 和 Safari */
.construct-dialog::-webkit-scrollbar {
  width: 0; /* Chrome, Edge 和 Safari */
}
 
/* 针对 IE 10+ */
.construct-dialog {
  -ms-overflow-style: none;  /* IE 10+ */
}
 
/* 针对 IE 11 */
.construct-dialog {
  overflow: auto;
}
.avatar{
  width: 160px;
  height: 160px;
}
</style>